<template>
  <div>
    <!-- 头部 -->
    <div class="top_tab">
      <div class="left">
        <!-- <img slot="left" src="../assets/index/sao.png"> -->
      </div>
      <span>会员中心</span>
      <div class="right">
        <img slot="right" src="../assets/mine/set.png" @click="setClick()">
      </div>
    </div>
    <div class="n"></div>
    <!-- 会员头像信息 -->
    <div class="note" >
      <div class="message"> 
        <div class="profile_photo "> 
          <img v-if="detailList.appimage" :src="detailList.appimage" alt="">
          <img v-else :src="detailList.avatar" alt="">
        </div>
        <span class="name">{{detailList.name}}</span>
        <span class="phone">{{detailList.phone}}</span>
        <!-- <span class="num">鸿包号：12731958</span> -->
      </div>
    </div>
    <!-- 我的鸿包 -->
    <div class="package">
      <span>我的鸿包</span>
      <div class="h_box">
        <div class="tops">
          <div class="cate" @click="debentureClick(detailList.claim_price)">
            <span class="hb">债权鸿包</span>
            <div class="detail">
              <span class="pr" v-if="parseInt(detailList.claim_price)>10000">{{(detailList.claim_price).toString()[0]}}.{{(detailList.claim_price).toString()[1]}}{{(detailList.claim_price).toString()[2]}}万</span>
              <span class="pr" v-if="parseInt(detailList.claim_price)<10000">{{detailList.claim_price | moneyFormat}}</span>
              <span class="mx">明细</span>
            </div>
          </div>
          <div class="cate" @click="ListingClick(detailList.sale_price)">
            <span class="hb">挂牌鸿包</span>
            <div class="detail">
              <span class="pr" v-if="detailList.sale_price == null">0.00</span>
              <span class="pr" v-else>{{detailList.sale_price | moneyFormat}}</span>
              <span class="mx">明细</span>
            </div>
          </div>
          <div class="cate" @click="entrustClick(detailList.entrust_price)">
            <span class="hb">委托鸿包</span>
            <div class="detail">
              <span class="pr">{{detailList.entrust_price | moneyFormat}}</span>
              <span class="mx">明细</span>
            </div>
          </div>
        </div>
        <div class="tops">
          <div class="cate" @click="consumeClick(detailList.consume_price)">
            <span class="hb">消费鸿包</span>
            <div class="detail">
              <span class="pr" v-if="parseInt(detailList.consume_price)>10000"> {{(detailList.consume_price).toString()[0]}}.{{(detailList.consume_price).toString()[1]}}{{(detailList.consume_price).toString()[2]}}万</span>
              <span class="pr" v-if="parseInt(detailList.consume_price)<10000">{{detailList.consume_price | moneyFormat}}</span>
              

              <span class="mx">明细</span>
            </div>
          </div>
          <div class="cate" @click="refundClick(detailList.selloff_price)">
            <span class="hb">鸿包余额</span>
            <div class="detail">
              <span class="pr">{{detailList.selloff_price | moneyFormat}}</span>
              <span class="mx">明细</span>
            </div>
          </div>
          <div class="cate" @click="welfareClick(detailList.welfare_price)">
            <span class="hb">福利鸿包</span>
            <div class="detail">
              <span class="pr">{{detailList.welfare_price | moneyFormat}}</span>
              <span class="mx">明细</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 菜单 -->
      <div class="box">
        <!-- <div class="bar" @click="identificationClick()">
          <img src="../assets/mine/renzhen.png">
          <span>解债师认证</span>
        </div> -->
        <div class="bar" @click="banktransferClick()">
          <img src="../assets/mine/zhangzhuang.png">
          <span>线下转账</span>
        </div>
        <div class="bar" @click="vipClick()">
          <img src="../assets/mine/shengji.png">
          <span>vip升级</span>
        </div>
        <div class="bar" @click="personalClick()">
         <img src="../assets/mine/renzheng.png">
          <span>会员认证</span>
        </div>
    
         <div class="bar" @click="Table_forClick()">
          <img src="../assets/mine/shangjiazhongxin.png">
          <span>商家中心</span>
        </div>
        <div class="bar"  @click="Oclick()">
          <img src="../assets/mine/erweima.png">
          <span>我的二维码</span>
        </div>
        <div class="bar" @click="subordinateClick()">
          <img src="../assets/mine/xiajihuiyuan.png">
          <span>我的分享</span>
        </div> 
          <div class="bar" @click="lianxi()">
          <img src="../assets/mine/llianxiwomen.png">
          <span>联系我们</span>
          </div> 
        <div class="bar" @click="qdao()">
          <img src="../assets/index/qiandao.png">
          <span>签到</span>
        </div>
        <div class="bar" @click="xiazai()">
          <img src="../assets/mine/appdd.png">
          <span>App下载</span>
        </div>
      </div> 
    <!-- 流程 -->
    <div class="flow">
      <div class="bar">
          <router-link to="/order_center?status1=0">
          <img src="../assets/mine/fukuans.png">
          </router-link>
          <router-link to="/order_center?status1=0">
          <span>待付款</span>
          </router-link> 
      </div>
      <div class="bar">
          <router-link to="/order_center?status1=1"> 
          <img src="../assets/mine/fahuos.png">
          </router-link> 
          <router-link to="/order_center?status1=1"> 
          <span>待发货</span>
          </router-link>
      </div>
      <div class="bar">
          <router-link to="/order_center?status1=2"> 
          <img src="../assets/mine/shouhuos.png">
          </router-link> 
          <router-link to="/order_center?status1=2"> 
          <span>待收货</span>
          </router-link> 
      </div>
      <div class="bar">
          <router-link to="/order_center?status1=3"> 
          <img src="../assets/mine/wanchengs.png">
          </router-link> 
          <router-link to="/order_center?status1=3"> 
          <span>已完成</span>
          </router-link> 
      </div>
      <!-- <div class="bar" @click="favoriteClick()">
        <img src="../assets/mine/shoucangs.png">
        <span>收藏</span>
      </div> -->
    </div>
    <div class="s"></div>
    <!-- 底部tab -->
    <div class="tabbarWarp">
      <yd-tabbar class="cy_tabbar" fixed active-color="#e63f3f" color="#999" bgcolor="#fff">
        <yd-tabbar-item title="首页" link="/">
          <img slot="icon" src="../assets/index/home-hui.png">
        </yd-tabbar-item>
        <yd-tabbar-item title="分类" link="/classify">
          <img slot="icon" src="../assets/index/classify-hui.png">
        </yd-tabbar-item>
        <yd-tabbar-item title="附近" link="/nearby">
          <img slot="icon" src="../assets/index/nearby-hui.png">
        </yd-tabbar-item>
        <yd-tabbar-item title="购物车" link="/information">
          <img slot="icon" src="../assets/index/information-hui.png">
        </yd-tabbar-item>
        <yd-tabbar-item title="我的" link="/mine" active>
           <img slot="icon" src="../assets/index/mine.png">
        </yd-tabbar-item>
      </yd-tabbar>
    </div>
    <!-- 二维码弹窗 -->
    <div class="meb" v-if="shou"  @click="vanish()">
      <div class="boxt">
        <!-- <img src="../assets/mine/erweima.jpg"> -->
        <div id="qrcode"></div>   
 
        <div class="catetxx">长按识别分享</div>
      </div>
    </div>
    <!-- 联系我们弹窗 -->
    <div class="mebs" v-if="shous"  @click="vanishs()">
      <div class="boxts">
        <span class="txt">官方客服电话</span>
        <span class="phone">TEL:40005205520</span>
        <div class="catets">拨打</div>
      </div>
    </div>
</div>
</template>
<script>
// 底部导航
import Vue from "vue";
import QRCode from "qrcodejs2";
import { TabBar, TabBarItem } from "vue-ydui/dist/lib.rem/tabbar";
Vue.component(TabBar.name, TabBar);
Vue.component(TabBarItem.name, TabBarItem);
export default {
  name: "mine",
  data() {
    return {
      uId: "11111",
      ewmao:'222',
      shou: false,
      shous: false,
      user_from:'',
      detailList: []
    };
  },
  activated: function() {
    location.reload();
  },

  methods: {
    Oclick: function() {
      this.shou = true;
      setTimeout(() => {
        this.qrcode();
      }, 500);
    },
    vanish: function() {
      this.shou = false;
    },
    Oclicks: function() {
      this.shous = true;
    },
    vanishs: function() {
      this.shous = false;
    },
    // orderClick: function() {
    //   this.$router.push("order_center");
    // },
    favoriteClick: function() {
      this.$router.push("favorite");
    },
    setClick: function() {
      this.$router.push("set");
    },
    subordinateClick: function() {
      this.$router.push("subordinate");
    },
    identificationClick: function() {
      this.$router.push("identification");
    },
    banktransferClick: function() {
      this.$router.push("banktransfer");
    },
    vipClick: function() {
      if(this.leve > 0 || this.user_from >0 ){
        this.$dialog.toast({ mes: '你已经是VIP会员' });
        return
      }
      this.$router.push("vip");
    },
    personalClick: function() {
      let self = this;
      let url = "/api/login/check_status";
      self.httpPost(
        url,
        {
          user_id: this.myid,
          token: this.token
        },
        function(res) {
          if (res.data == 1) {
            self.$dialog.toast({
              mes: "您的申请正在审核中，请勿重复操作！",
              timeout: 1500
            });
          }
          if (res.data == 2) {
            self.$dialog.toast({
              mes: "您已成为会员",
              timeout: 1500
            });
          }
          if (res.data == 3) {
            self.$router.push("./resubmit");
          }
          if (res.data == 9) {
            self.$router.push("./personal");
          }
        }
      );
    },
    Table_forClick: function() {
      let self = this;
      let url = "/api/business/check_status";
      self.httpPost(
        url,
        {
          user_id: this.myid,
          token: this.token
        },
        function(res) {
          if (res.data == 1) {
            self.$dialog.toast({
              mes: "您的申请正在审核中，请勿重复操作！",
              timeout: 1500
            });
          }
          if (res.data == 2) {
            self.$router.push("./audit");
          }
          if (res.data == 3) {
            self.$dialog.toast({
              mes: "您的申请未通过，请重新提交！",
              timeout: 1500
            });
            self.$router.push("./Table_for");
          }
          if (res.data == 9) {
            self.$router.push("./Table_for");
          }
        }
      );
    },
    debentureClick: function(money) {
      this.$router.push("debenture?money=" + money);
    },
    ListingClick: function(money) {
      this.$router.push("Listing?money=" + money);
    },
    entrustClick: function(money) {
      this.$router.push("entrust?money=" + money);
    },
    consumeClick: function(money) {
      this.$router.push("consume?money=" + money);
    },
    refundClick: function(money) {
      this.$router.push("refund?money=" + money);
    },
    welfareClick: function(money) {
      this.$router.push("welfare?money=" + money);
    },
    xiazai(){
      this.$router.push("/appdown");
    },
    lianxi(){
      this.$router.push("/lianxi");
    },
    //签到
    qdao: function() {
      let self = this;
      let url = "/api/sign";
      self.httpPost(url, { user_id: this.myid, token: this.token }, function(
        res
      ) {
        if (res.code === 200) {
          self.$dialog.toast({ mes: res.msg });
          self.detail();
        } else {
          self.$dialog.toast({ mes: res.msg });
        }
      });
    },
    //获取用户资料
    detail: function() {
      let self = this;
      let url = "/api/login/detail";
      self.httpPost(url, { user_id: this.myid, token: this.token }, function(
        res
      ) {
        if (res.code === 200) {
          self.detailList = res.data;
          self.uId = res.data.id;
          self.ewmao = res.data.qrcode + res.data.id;
          self.user_from = res.data.user_from;
          console.log(self.ewmao)
          localStorage.setItem("leve", res.data.level);
           if(self.detailList.openid==" "||self.detailList.openid==null || self.detailList.openid== 'null'){
              self.$router.push("/registered");
           }
          // console.log(self.uId)
        } else if (res.code === 288) {
          self.$dialog.toast({ mes: res.msg });
          localStorage.clear()
          setTimeout(function() {
            // self.$router.push("/login");

           window.location.href="http://hbh.dev.whbpkj.com/wx/login"
          }, 1500);
        }
      });
    },
   
    qrcode() {
      let qrcode = new QRCode("qrcode", {
        width: 200,
        height: 200, // 高度
        // text: "http://hbh.dev.whbpkj.com/wx/login_up/" + this.uId + "" // 二维码内容
        text: this.ewmao  // 二维码内容
      });
    },
    saomiao(){
      let self = this;
      let url = "/api/login/qrcode";
      self.httpPost(url, { user_id: this.myid, token: this.token,up_id:this.up_id }, function(res) {
        if (res.code === 200) {
           self.$dialog.toast({ mes: res.msg });
        } else {
           self.$dialog.toast({ mes: res.msg });
        }
      });
    }
  },
  created() {
    document.title = "个人中心";
    this.token = localStorage.getItem("mytoken");
    this.myid = localStorage.getItem("myid");
    this.leve = localStorage.getItem("leve"); 

    this.up_id = localStorage.getItem('up_id');
    this.detail(); 
    // this.saomiao()
  },
  mounted() {}
};
</script>

<style scoped>
.tabbarWarp {
  width: 100%;
  border-top: 1px solid #cccccc;
  position: fixed;
  bottom: 0;
  z-index: 9999999;
}
.cy_tabbar {
  font-size: 0.3rem;
}
.yd-tabbar-icon img {
  width: 0.5rem;
}
.top_tab {
  width: 100%;
  padding: 0.2rem 0.3rem;
  background: #e63f3f;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  z-index: 999;
}
.top_tab span {
  color: #fff;
  font-size: 0.3rem;
  margin-left: 0.45rem;
}
.top_tab img {
  width: 0.46rem;
}
.n {
  height: 0.92rem;
}
.note {
  width: 100%;
  height: 4.2rem;
  position: relative;
  padding: 0.3rem 0;
  background: #e63f3f;
}
.note .message {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.note .message span {
  font-size: 0.24rem;
  color: #fff;
  margin-top: 0.1rem;
}
.note .message .profile_photo {
  width: 1.22rem;
  height: 1.22rem;
  border-radius: 50%;
}
.note .message .profile_photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.package {
  width: 100%;
  /* height:3.27rem; */
  padding: 0.3rem 0.3rem;
  background: #fff;
  position: absolute;
  z-index: 99;
  top: 3.6rem;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.package span {
  font-size: 0.36rem;
  color: #707070;
  margin: 0 auto;
}
.package .h_box {
  width: 100%;
  height: 2.2rem;
  display: flex;
  margin-top: 0.2rem;
  flex-direction: column;
  justify-content: space-between;
}
.package .h_box .tops {
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.package .h_box .tops .cate {
  width: 2.2rem;
  height: 1rem;
  background: #ec6941;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  padding: 0.1rem 0.1rem;
}
.cate:nth-child(3) ~ .cate {
  margin-top: 0.2rem;
}
.package .h_box .tops .cate .hb {
  color: #fff;
  font-size: 0.31rem;
}
.package .h_box .tops .cate .detail {
  width: 99%;
  display: flex;
  justify-content: space-between;
  margin-top: 0.05rem;
}
.package .h_box .tops .cate .detail .pr {
  color: #fff;
  font-size: 0.31rem;
}
.package .h_box .tops .cate .detail .mx {
  border: 1px solid #fff;
  width: 0.7rem;
  height: 0.3rem;
  text-align: center;
  line-height: 0.3rem;
  font-size: 0.18rem;
  color: #fff;
}
.box{
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  margin-top: 2.1rem;
  padding: .2rem .1rem 0 .2rem;
}
.bar{
  width: 20%;
  text-align: center;
  margin-bottom: .4rem;
}
.box .bar img {
  width: 0.71rem;
  height: 0.71rem;
  display: block;
  margin: 0 auto;
  margin-bottom: 3px;
}
 .box .bar span {
  color: #626262;
  font-size: 0.24rem;
}
.flow {
  margin-top: 0.2rem;
  width: 100%;
  height: 1.4rem;
  background: #fff;
  display: flex;
  justify-content: space-around;
  padding: 0.16rem 0;
}
.flow .bar {
  display: flex;
  width: 22%;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.flow .bar img {
  width: 0.75rem;
  height: 0.69rem;
}
.flow .bar span {
  font-size: 0.24rem;
  color: #626262;
}
.chart {
  margin-top: 0.2rem;
  width: 100%;
  background: #fff;
  padding: 0.3rem 0.3rem;
}
.s {
  height: 2rem;
}
.meb {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9999999;
}
.boxt {
  background: white;
  width: 5.97rem;
  height: 5.97rem;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999999;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.boxt img {
  width: 4.5rem;
  height: 4.5rem;
}
.boxt .catet {
  color: #fff;
  width: 0.98rem;
  height: 0.37rem;
  line-height: 0.38rem;
  border-radius: 5px;
  font-size: 0.3rem;
  text-align: center;
  background: #f29b76;
  border: none;
}

.mebs {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9999999;
}
.boxts {
  background: white;
  border: 1px solid #ec6941;
  width: 5.97rem;
  height: 3.1rem;
  position: fixed;
  padding: 0.3rem 0.2rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999999;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.boxts .txt {
  font-size: 0.55rem;
  color: #7f7f7f;
}
.boxts .phone {
  font-size: 0.4rem;
  color: #7f7f7f;
}
.boxts .catets {
  color: #fff;
  width: 2.76rem;
  height: 0.66rem;
  line-height: 0.66rem;
  border-radius: 5px;
  font-size: 0.36rem;
  text-align: center;
  background: #e53a30;
  border: none;
}
.catetxx{
  margin-top: 20px;
}
</style>
